<template>
  <!-- 余额变动明细 余额明细 -->
  <div class="app-container ">
    <el-form class="search-form-new" :model="queryParams" ref="queryForm" :inline="true" >
      <el-form-item label="店铺" prop="tenantId" v-hasPermi="['searchTenantID']">
          <el-select v-model="queryParams.tenantId" placeholder="请选择店铺" clearable filterable>
            <el-option v-for="dict in tenantList" :key="dict.tenantId" :label="dict.tenantName" :value="dict.tenantId" />
          </el-select>
        </el-form-item>
      <el-form-item label="变动类型" prop="changeType">
        <el-select v-model="queryParams.changeType" placeholder="请选择变动类型" size="mini" clearable>
          <el-option v-for="(dict, key) in commonMaps.moneyChangeTypeMap" :key="key" :label="dict.label" :value="key" />
        </el-select>
      </el-form-item>
      <el-form-item label="时间" prop="">
        <el-date-picker style="width: 220px" v-model="timer" type="daterange" align="right" unlink-panels size="small" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd" :picker-options="pickerOptions" @change="handleQuery">
        </el-date-picker>
      </el-form-item>

      <el-form-item class="btns">
        <el-button type="primary" icon="el-icon-search" size="small" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="small" @click="resetQuery">重置/刷新</el-button>
      </el-form-item>
    </el-form>
    <div class="table_box">
      <el-table stripe :data="tableData.records" style="width: 100%">
        <el-table-column prop="createTime" label="时间" width="160"></el-table-column>
        <el-table-column prop="" label="变动类型" width="120">
          <template slot-scope="scope">
            <el-tag :type="scope.row.changeType?commonMaps.moneyChangeTypeMap[scope.row.changeType].type:'warning'">{{
                scope.row.changeType?commonMaps.moneyChangeTypeMap[scope.row.changeType].label:'无'
              }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="state" label="余额变动" width="120">
          <template slot-scope="scope">
            <div :style="`color:${scope.row.type == 1?'#67c23a':'red'}`">
              {{ `${scope.row.type == 1&&scope.row.amount>0? "+" : (scope.row.amount>0?"-":'')}${scope.row.amount}` }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="afterAmount" label="变动后余额" width="120"></el-table-column>

        <el-table-column prop="reason" label="说明" min-width="120" >
          <template slot-scope="scope">
            <div style="white-space: pre-wrap">
              {{scope.row.reason }}
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div style="text-align: right;">
    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
</div>
  </div>
</template>
<script>
import myMoneyApi from "@/api/financeCenter/myMoney.js";
export default {
  name: "",
  props:["tenantId"],
  data() {
    return {
      timer: [],
      tableData: {
        records: [],
      },
      total: 0,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 20,
        applicantTimeStart: "",
        applicantTimeEnd: "",
        dataType: "one",
        changeType:'',
        tenantId:''
      },
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
    };
  },
  watch: {
    tenantId: {
      handler(newVal) {
        if(newVal){
          this.queryParams.tenantId = newVal
          this.queryParams.dataType = 'all'
        }else{
          this.queryParams.tenantId = ''
          this.queryParams.dataType = 'one'
        }
        this.getList();
      },
      immediate: true,
    },
  },
  computed: {
    tenantList() {
      return this.$store.getters.tenantList;
    },
  },
  created() {
    // this.getList();
  },
  methods: {
    // 获取列表
    getList() {
      // queryParams 请求列表
      this.loading = true;
      if(this.queryParams.tenantId){
        this.queryParams.dataType = 'all'
      }else{
        this.queryParams.dataType = 'one'
      }
      if (this.timer && this.timer.length == 2) {
        this.queryParams.operatorTimeStart = this.timer[0] + " 00:00:00";
        this.queryParams.operatorTimeEnd = this.timer[1] + " 23:59:59";
      } else {
        this.queryParams.operatorTimeStart = "";
        this.queryParams.operatorTimeEnd = "";
      }
      myMoneyApi.getList(this.queryParams).then((res) => {
        this.loading = false;
        this.tableData.records = res.rows;
        this.total = res.total;
      });
    },

    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.timer = [];
      this.handleQuery();
    },
    // resetQuery() {
    //   this.timer = [];
    //   this.queryParams = {
    //     pageNum: 1,
    //     pageSize: 20,
    //     applicantTimeStart: "",
    //     applicantTimeEnd: "",
    //     dataType: "one",
    //   };
    //   this.getList();
    // },

    // 每页条数改变
    handleSizeChange(val) {
      this.queryParams.pageSize = val;
      this.getList();
    },
    // 页码改变
    handleCurrentChange(val) {
      this.queryParams.pageNum = val;
      this.getList();
    },
  },
};
</script>
<style lang="scss" scoped>
.app-container {
  height: auto;
}
</style>
